<template>
  <div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" title="报警列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    <!--    <div class="d-flex mt-2 w-100">-->
    <!--      <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="index" is-scroll @change="tagChange" />-->
    <!--    </div>-->
    <div>
      <div v-if="listData && listData.length>0" class="common_list">
        <div v-for="(item, ind) in listData" :key="ind" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ ind + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
                <span>{{ item.alarmStatus }}</span>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe611;</i>
                  <div class="label">报警类别：</div>
                  <div class="value">{{ item.eventType }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe634;</i>
                  <div class="label">报警级别：</div>
                  <div class="value">{{ item.alarmLevel }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe685;</i>
                  <div class="label">报警时间：</div>
                  <div class="value">{{ item.monitorTime }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color4">&#xe685;</i>
                  <div class="label">报警状态：</div>
                  <div class="value">{{ item.handleStatus }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="报警时间" type="datetime" />
          <customPopCheckbox :list="selectOptionAll['能源_报警类别']" :check-value.sync="form.eventType" title="报警类别" />
          <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.handleStatus" title="报警状态" />
          <customPopCheckbox :list="selectOptionAll['报警预警级别']" :check-value.sync="form.alarmLevel" title="报警级别" />
          <!--          <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.falseAlarm" title="是否误报" />-->
          <!--          <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.handleStatus" title="是否生成处置任务" />-->
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import { companyList } from '@/api/enterprise'
import customTimer from '@/components/common/custom-timer1.vue'
import commonList from '@/assets/mixin/commonList'
import { MonitorAalarmList } from '@/api/commonPage/AlarmManagement'
import { prevTime } from '@/utils/dayJs'
export default {
  components: {
    customTimer
  },
  mixins: [commonList],
  data() {
    return {
      index: 0,
      active: '报警',
      form: {
        pageNum: 1,
        pageSize: 10,
        companyIds: -1,
        alarmItem: '',
        alarmLevel: '',
        alarmName: '',
        alarmType: '',
        companyName: '',
        deviceTypeId: '',
        eventType: '',
        handleStatus: '',
        isClose: '',
        isCreateTask: '',
        isReportBloc: '',
        isUpDisposal: '',
        meteringLevel: '',
        source: -1,
        startTime: '',
        endTime: ''
      },
      tagChangeFirstLoading: true,
      firstLoad: true,
      defaultTime: {
        sTime: '',
        eTime: ''
      },
      list: [
        {
          label: '报警列表'
        }
      ],
      current: '',
      listData: []
    }
  },
  mounted() {
    const { current, active } = this.$route.query
    if (current) {
      this.current = current
    }
    if (active) {
      this.active = active
      this.list.map((v, ind) => {
        if (v.label === active) {
          this.index = ind
        }
      })
    }
    this.companyList()
  },
  methods: {
    tagChange(tagArg) {
      this.index = tagArg.index
      this.active = tagArg.item.label
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.companyIds = -1
      this.form.startTime = this.defaultTime.sTime
      this.form.endTime = this.defaultTime.eTime
    },
    // 跳转详情
    goToDetails(item) {
      const { monitorAlarmId } = item
      this.$router.push({
        path: '/staging/AlarmManagementDetail',
        query: { monitorAlarmId, current: this.current, active: this.active }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const { status, data } = await MonitorAalarmList(this.form)
      if (status === 0 && data) {
        this.total = data.total
        if (data.list[0]) {
          if (this.tagChangeFirstLoading || (this.form.startTime === '' && this.form.endTime === '')) {
            this.form.startTime = prevTime('年月日时分秒', 1, 'M', new Date(data.list[0].monitorTime))
            this.form.endTime = data.list[0].monitorTime
          }
          if (this.firstLoad) {
            this.defaultTime.sTime = prevTime('年月日时分秒', 1, 'M', new Date(data.list[0].monitorTime))
            this.defaultTime.eTime = data.list[0].monitorTime
            this.firstLoad = false
          }
        }
        data.list.map(val => {
          Object.keys(val).map(key => {
            val[key] = val[key] !== '' && val[key] !== undefined ? val[key] : '/'
          })
        })
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.tagChangeFirstLoading = false
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
